<template>
    <div class="stu-navigator">
        <!-- 导航项 -->
        <div class="navigator-item" v-for="(item, index) in navItems" :key="index">
            <div class="navigator-title" @click="toggleSubmenu(index)">
                <span>{{ item.title }}</span>
                <span v-if="item.subItems" class="toggle-icon">
                    {{ expandedIndex === index ? '-' : '+' }}
                </span>
            </div>
            <!-- 子菜单 -->
            <div v-if="item.subItems && expandedIndex === index" class="submenu">
                <RouterLink v-for="(subItem, subIndex) in item.subItems" :key="subIndex" :to="subItem.path"
                    class="submenu-item">
                    {{ subItem.label }}
                </RouterLink>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { RouterLink } from 'vue-router';
// 导航数据
const navItems = [
    {
        title: '账号详情',
        subItems: [
            { label: '修改密码', path: '/stu/changepassword' },
            { label: '修改个人信息', path: '/stu/editpersonalinfo' },
        ]
    },
    {
        title: '活动',
        subItems: [
            { label: '搜索活动', path: '/stu/searchactivity' },
            { label: '我的活动', path: '/stu/actmem' },
        ]
    },
    {
        title: '组织',
        subItems: [
            { label: '搜索组织', path: '/stu/searchstuorg' },
            { label: '我管理的组织', path: '/stu/myorg' },
            { label: '我参加的组织', path: '/stu/myattendorgs' },
        ]
    },
    {
        title: '新闻稿',
        subItems: [
            { label: '搜索新闻稿', path: '/stu/searchorgnews' },
        ]
    },
    {
        title: '公告',
        subItems: [
            { label: '搜索组织公告', path: '/stu/searchorgnotice' },
            { label: '搜索管理员公告', path: '/stu/searchadminnotice' },
        ]
    },
    {
        title: '查询',
        subItems: [
            { label: '查询学生组织', path: '/stu/searchstuorg' },
            { label: '查询管理员', path: '/stu/searchadmin' },
        ]
    },

];

// 当前展开的导航项索引
const expandedIndex = ref(null);

// 切换子菜单显示/隐藏
const toggleSubmenu = (index) => {
    expandedIndex.value = expandedIndex.value === index ? null : index;
};
</script>

<style scoped>
.stu-navigator {
    width: 200px;
    height: 100vh;
    background-color: #f8f9fa;
    border-right: 1px solid #ddd;
    padding: 10px;
}

.navigator-item {
    margin-bottom: 10px;
    cursor: pointer;
}

.navigator-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.navigator-title:hover {
    background-color: #f1f1f1;
}

.toggle-icon {
    font-weight: bold;
}

.submenu {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    padding-left: 15px;
}

.submenu-item {
    display: block;
    padding: 5px 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: background-color 0.3s;
    text-decoration: none;
    color: inherit;
}

.submenu-item:hover {
    background-color: #e9ecef;
}
</style>